<!-- 充值记录手机号输入 -->
<template>
    <div class="lifePayCostBillBefore">
        <van-nav-bar title="查询记录" left-arrow :border="false" @click-left="onClickLeft"/>
        <div class="flex flexColumn alignCenter">
            <img class="headImg" src="@/assets/lifePayCost/billBeforeHeadImg.png" alt="">
        </div>
        <div class="content">
            <van-field v-model="account" type="tel" placeholder="请输入充值号码" >
                <template #label>
                    <img class="fieldIcon" src="@/assets/lifePayCost/accountIcon.png" alt="">
                </template>
            </van-field>
        </div>
        <div class="btn">
            <van-button @click="goNext" type="primary" block>立即查看</van-button>
        </div>
    </div>
</template>

<script>
import { ref, reactive, getCurrentInstance } from 'vue';
import { NavBar , Field , Button } from 'vant';
export default {
    components: {
        [NavBar.name]: NavBar,
        [Field.name]: Field,
        [Button.name]: Button,
    },
    setup() {
        const { proxy } = getCurrentInstance();
        // 返回上一页
        const onClickLeft = () => history.back();

        // 账号
        const account = ref('');

        // 跳转列表也
        const goNext = () => {
            if(account.value == ''){
                proxy.$toast({message: '请输入充值账号！',position: 'bottom'});
                return;
            }
            proxy.$router.push({name: 'lifePayCostBill',params: {'orderType': proxy.$route.params.orderType,'account': account.value}})
        }

        return {
            onClickLeft,
            account,
            goNext,
        }
    }
}

</script>
<style scoped>
.lifePayCostBillBefore{
    min-height: 100vh;
    background: url('../../assets/lifePayCost/electricityChargeHeadNanBg.png') no-repeat;
    background-size: 100%;
}
.lifePayCostBillBefore /deep/ .van-nav-bar{
    background: none;
}
.lifePayCostBillBefore /deep/ .van-icon{
    color: #FFFFFF;
}
.lifePayCostBillBefore /deep/ .van-nav-bar__title{
    color: #FFFFFF;
}
.lifePayCostBillBefore /deep/ .van-field__label{
    width: 33px;
    margin: 0;
}
.headImg{
    width: 256px;
    height: 259px;
}
.content{
    border-radius: 8px;
    background: #FFFFFF;
    margin: 10px 20px;
    overflow: hidden;
    padding: 10px;
}
.fieldIcon{
    width: 21px;
    height: 21px;
}
.btn{
    margin: 80px 20px 0;
}
.btn .van-button--primary{
    border-radius: 40px;
}
</style>